import { FormOutlined, PlusOutlined } from '@ant-design/icons';
import { ProDescriptionsItemProps, ProTable } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Divider, message, Popconfirm, Tag } from 'antd';
import React from 'react';
const ClrPage: React.FC = ({ children }) => {
   const { actionRef, getHandler, removeHandler } =
     useModel('Classroom.model', (model) => {
       return {
         actionRef: model.actionRef,
         getHandler: model.getHandler,
         removeHandler: model.removeHandler,
       };
     });
    const columns: ProDescriptionsItemProps<API.ClrInfo>[] = [
      {
        title: '序号',
        dataIndex: 'index',
        valueType: 'indexBorder',
        align: 'center',
        width: 60,
      },
      {
        title: '教室名称',
        dataIndex: 'clsr_name',
        initialValue: '',
        formItemProps: {
          roules: [
            { required: true, message: '教室名称为必填项' },
            { min: 2, max: 10, message: '教室名称长度在2-10之间' },
          ],
        },
      },
      {
        title: '是否占用',
        hideInSearch: true,
        hideInForm: true,
        render: (_, record) =>
          record.clsr_occupy === 1 ? (
            <Tag color="#ccc">占用</Tag>
          ) : (
            <Tag color="#87d068">未占用</Tag>
          ),
      },
      {
        title: '操作',
        valueType: 'option',
        hideInSearch: true,
        hideInForm: true,
        render: (_, record) => (
          <>
            <Popconfirm
              title={`你确定要删除吗？`}
              onConfirm={async () => {
                const success = await removeHandler(record.clsr_id);
                if (success) actionRef.current?.reloadAndRest?.();
              }}
              onCancel={() => message.info('你取消了删除操作')}
              okText="确定"
              cancelText="取消"
              placement="topRight"
            >
              <Button type="primary">删除</Button>
            </Popconfirm>
            <Divider type="vertical" />
            {React.cloneElement(
              children[1],
              { echoRecord: record },
              <Button icon={<FormOutlined />}>修改</Button>,
            )}
          </>
        ),
      },
    ];

  const proTableProps = {
    cardBordered: true,
    bordered: true,
    headerTitle: '教室管理',
    search: { searchText: '搜索', resetText: '重置' },
    actionRef: actionRef,
    pagination: { pageSize: 10 },
    toolBarRender: () =>
      React.cloneElement(
        children[0],
        null,
        <Button type="primary" icon={<PlusOutlined />}>
          新增
        </Button>,
      ),
    rowKey: 'clsr_id',
    columns: columns,
    request: async () => {
      const data = await getHandler();
      return {
        data: data,
        success: true,
      };
    },
  };
  return <ProTable<API.ClrInfo> {...proTableProps}></ProTable>;
};
export default ClrPage;
